<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    
</head>
<style type="text/css">
	.boxwrap{
		width:100%;
		height:400px;
		background-color: #009900;
	}
	
	.box1{
		height:200px;
		width:200px;
		background-color:#f00;
		margin:0 auto;
		border:1px solid #000;
		
		
	}
	
	.but1{
		width:50px;
		height:20px;
		border:1px solid #000;
		margin-top:20px;
		
	}
	
	.but2{
		width:50px;
		height:20px;
		border:1px solid #000;
		margin-top:20px;
	}
	
	.but3{
		width:50px;
		height:20px;
		border:1px solid #000;
		margin-top:-100px;
	}
</style>
<body>
    <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
    
    <script type="text/javascript">
    	$(document).ready(function(){
    		$(".but1").click(function(){
    			$(".box1").show(500);
    		});
    		
    		$(".but2").click(function(event){
    			$(".box1").hide(300);
    			event.stopPropagation();
    		});
    		$(".but3").click(function(event){
    			$(".box1").hide(800);
    			event.stopPropagation();
    		});
    	});
    </script>
    <div class="boxwrap">
    	<div class="box1"></div>
    	<div class="but1">show
    		<div class="but2">hide[0]</div>
    	</div>
    	
    </div>
    	<div class="but3">hide[1]</div>
    
</body>
</html>
